<template>
  <div class="contents">
    <div class="contetn_left">
      <div class="pagetab">
         <div class="item_produce">©2022常州市武进规划勘测设计院-空间信息所</div>

      </div>
      <ItemWrap class="contetn_left-top contents_lr-item_top" title="">
        <div class="tab_content">
          <div class="contents_lr-item_top_tab1 contents_lr-item_top_tab faa-pulse animated-hover faa-slow" @disabled="displayTab==2" @click="displayTab=2"></div>
          <div class="contents_lr-item_top_tab2 contents_lr-item_top_tab faa-pulse animated-hover faa-slow" @disabled="displayTab==3" @click="displayTab=3"></div>
          <div class="contents_lr-item_top_tab3 contents_lr-item_top_tab faa-pulse animated-hover faa-slow" @disabled="displayTab==1" @click="displayTab=1"></div>
        </div>
      </ItemWrap>
      <ItemWrap class="contetn_left-center contetn_lr-item" title="9大重点产业" v-show="displayTab==1" style="padding: 0 10px 16px 10px">
        <LeftCenterOne />
      </ItemWrap>
      <ItemWrap class="contetn_left-center contetn_lr-item" title="重点产业" v-show="displayTab==4" style="padding: 0 10px 16px 10px">
        <LeftCenterFour />
      </ItemWrap>
      <ItemWrap class="contetn_left-center contetn_lr-item" title="产业现状" v-show="displayTab==2">
        <LeftCenterTwo />
      </ItemWrap>
      <ItemWrap class="contetn_left-center contetn_lr-item" title="产业策略" v-show="displayTab==3">
        <LeftCenterThree />
      </ItemWrap>
      <ItemWrap
          v-show="displayTab==1"
          class="contetn_left-bottom contetn_lr-item"
          title="5张产业名片"
          style="padding: 0 10px 16px 10px"
      >
        <LeftBottomOne />
      </ItemWrap>
      <ItemWrap
          v-show="displayTab==4"
          class="contetn_left-bottom contetn_lr-item"
          title="产业名片"
          style="padding: 0 10px 16px 10px"
      >
        <LeftBottomFour />
      </ItemWrap>
      <ItemWrap
          v-show="displayTab==2"
          class="contetn_left-bottom contetn_lr-item"
          title="空间现状"
          style="padding: 0 10px 16px 10px"
      >
        <LeftBottomTwo />
      </ItemWrap>
      <ItemWrap
          v-show="displayTab==3"
          class="contetn_left-bottom contetn_lr-item"
          title="空间策略"
          style="padding: 0 10px 16px 10px"
      >
        <LeftBottomThree />
      </ItemWrap>

    </div>
    <div class="contetn_center">
      <CenterMapNew class="contetn_center_top" />
      <ItemWrap v-if="displayTab!==1&&displayTab!==2&&displayTab!==3&&displayTab!==4" class="contetn_center-bottom" title="数据导览">
        <CenterBottom />
      </ItemWrap>
      <ItemWrap v-if="displayTab===1||displayTab===4" class="contetn_center-bottom" title="产业引导">
        <CenterBottomOne />
      </ItemWrap>
      <ItemWrap v-if="displayTab===2" class="contetn_center-bottom" title="十三五成绩">
        <CenterBottomTwo />
      </ItemWrap>
      <ItemWrap v-if="displayTab===3" class="contetn_center-bottom" title="四大组团">
        <CenterBottomThree />
      </ItemWrap>
    </div>
    <div class="contetn_right">
      <ItemWrap
        class="contetn_left-bottom contents_lr-item_top"
        title=""
      >
        <div class="tab_content_right">
          <div class="contents_lr-item_top_tab_map faa-pulse animated-hover faa-slow" @click="toMap"></div>
        </div>
      </ItemWrap>

      <ItemWrap
          v-show="displayTab==1"
        class="contetn_left-bottom contetn_lr-item"
        title="重要板块规划"
        style="padding: 0 10px 16px 10px"
      >
        <RightCenterOne />
      </ItemWrap>
      <ItemWrap
          v-show="displayTab==4"
          class="contetn_left-bottom contetn_lr-item"
          title="未来产业"
          style="padding: 0 10px 16px 10px"
      >
        <RightCenterFour />
      </ItemWrap>
      <ItemWrap
          v-show="displayTab==2"
          class="contetn_left-bottom contetn_lr-item"
          title="科创现状"
          style="padding: 0 10px 16px 10px"
      >
        <RightCenterTwo />
      </ItemWrap>
      <ItemWrap
          v-show="displayTab==3"
          class="contetn_left-bottom contetn_lr-item"
          title="科创策略"
          style="padding: 0 10px 16px 10px"
      >
        <RightCenterThree />
      </ItemWrap>
      <ItemWrap
          v-show="displayTab==2"
          class="contetn_left-bottom contetn_lr-item"
          title="现状认知 "
      >
        <RightBottomTwo/>
      </ItemWrap>
      <ItemWrap
          v-show="displayTab==1||displayTab==4"
          class="contetn_left-bottom contetn_lr-item"
          title="产业引导 "
      >
        <RightBottomMap :displayShow="displayTab==1"/>
      </ItemWrap>
      <ItemWrap
          v-show="displayTab==3"
          class="contetn_left-bottom contetn_lr-item"
          title="95X产业体系 "
      >
        <RightBottomThree />
      </ItemWrap>
    </div>
  </div>
</template>

<script>
import LeftTop from './left-top.vue'
import LeftCenter from "./left-center.vue";
import LeftCenterOne from "./left-center-one.vue";
import LeftCenterFour from "./left-center-four.vue";
import LeftCenterTwo from "./left-center-two.vue";
import LeftCenterThree from "./left-center-three.vue";
import LeftBottom from "./left-bottom.vue";
import LeftBottomOne from "./left-bottom-one.vue";
import LeftBottomFour from "./left-bottom-four.vue";
import LeftBottomTwo from "./left-bottom-two.vue";
import LeftBottomThree from "./left-bottom-three.vue";
import CenterMap from "./center-map.vue";
import CenterMapNew from "./center-map-new.vue";
import CenterBottom from "./center-bottom.vue";
import CenterBottomTwo from "./center-bottom-two.vue";
import CenterBottomThree from "./center-bottom-three.vue";
import CenterBottomOne from "./center-bottom-one.vue";
import RightTop from "./right-top.vue";
import RightCenterOne from "./right-center-one.vue";
import RightCenterFour from "./right-center-four.vue";
import RightCenter from "./right-center.vue";
import RightCenterTwo from "./right-center-two.vue";
import RightCenterThree from "./right-center-three.vue";
import RightBottom from "./right-bottom.vue";
import RightBottomMap from "./right-bottom-map.vue";
import RightBottomTwo from "./right-bottom-two.vue";
import RightBottomThree from "./right-bottom-three.vue";

export default {
  components: {
    LeftTop,
    LeftCenter,
    LeftCenterOne,
    LeftCenterFour,
    LeftCenterTwo,
    LeftCenterThree,
    LeftBottom,
    LeftBottomOne,
    LeftBottomFour,
    LeftBottomTwo,
    LeftBottomThree,
    CenterMap,
    CenterMapNew,
    RightTop,
    RightCenterOne,
    RightCenterFour,
    RightCenter,
    RightCenterTwo,
    RightCenterThree,
    RightBottom,
    RightBottomMap,
    RightBottomTwo,
    RightBottomThree,
    CenterBottom,
    CenterBottomOne,
    CenterBottomTwo,
    CenterBottomThree
  },
  data() {
    return {
      visible:true,
      show:true,
      displayTab:2,
    };
  },
  filters: {
    numsFilter(msg) {
      return msg || 0;
    },
  },
  created() {
  },
  watch:{
    '$store.state.tabChangeData': function () {
      var that=this
      console.log(that.$store.state.tabChangeData)
      that.displayTab=that.$store.state.tabChangeData.displayTab
    },
    displayTab (newV,oldV){
      console.log(newV)
      if (newV===2){
        this.backMap()
      }else if (newV===1){
        this.$store.state.mapChangeData={
          url:"http://218.93.116.192:8087/geoserver/xf/wms",
          name:"95X",
          params:{
            LAYERS: "xf:ppt_95X_9"
          },
          location:[119.91, 31.63],
          zoom:11.2
        }
      }else if (newV===3){
        this.$store.state.mapChangeData={
          url:"http://218.93.116.192:8087/geoserver/zxm/wms",
          name:"四大组团",
          params:{
            LAYERS: "zxm:zutuan"
          },
          location:[119.93, 31.61],
          zoom:10.8
        }
      }
    }
  },
  mounted() {},
  methods: {
    backMap(){
      this.$store.state.mapChangeData={
        url:"",
        name:"33X",
        params:{
          LAYERS: "xf:gh_ppt_cykjbj0823"
        },
        location:[119.67, 31.68],
        zoom:5
      }
    },
    toMap(){
      let routeUrl = this.$router.resolve({
        path: "/map",
        // query: {id:96}
      });
      window.open(routeUrl.href, '_blank');
      // this.$router.push({name:'map'})
    }
  },
};
</script>
<style lang="scss" scoped>
.slide-enter-active,
.slide-leave-active{
  transition: all 1s ease;
  //position: absolute;//脱离文档流，解决组件切换时产生的空白
}
.slide-enter{
  transform: translateX(100%);
  opacity: 0;
}
.slide-leave-to{
  transform: translateX(-100%);
  opacity: 0;
}
.fade-enter-active, .fade-leave-active {
  transition: all 3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
// 内容
.contents {
  .contetn_left,
  .contetn_right {
    width: 540px;
    box-sizing: border-box;
    // padding: 16px 0;
  }

  .contetn_center {
    width: 720px;
  }

  //左侧 top
  .contents_lr-item_top{
    height: 200px;
    margin-top: 20px;
    margin-bottom: 65px;
    .tab_content_right{
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      align-content: center;
      justify-content: center;
      .contents_lr-item_top_tab_map{
        width: 240px;
        height: 62px;
        //padding: 16px 16px 10px 16px;
        box-sizing: border-box;
        background-size: cover;
        background-image: url("../../assets/img/datav/join_map.png");
        background-position: center center;
      }
      .contents_lr-item_top_tab_map:hover{
        cursor: pointer;
      }
    }
    .tab_content{
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: row;
      align-content: center;
      align-items: center;
      justify-content: space-around;
      .contents_lr-item_top_tab{
        width: 152px;
        height: 68px;
        //padding: 16px 16px 10px 16px;
        box-sizing: border-box;
        background-size: cover;
        background-position: center center;
      }
      .contents_lr-item_top_tab:hover{
        cursor: pointer;
      }
      .contents_lr-item_top_tab1{
        background-image: url("../../assets/img/datav/data_tab1.png");
      }
      .contents_lr-item_top_tab2{
        background-image: url("../../assets/img/datav/data_tab2.png");
      }
      .contents_lr-item_top_tab3{
        background-image: url("../../assets/img/datav/data_tab3.png");
      }
    }
    .contents_lr-item_top_tab1{
      width: 152px;
      height: 68px;
      //padding: 16px 16px 10px 16px;
      box-sizing: border-box;
      background-image: url("../../assets/img/datav/data_tab1.png");
      background-size: cover;
      background-position: center center;
    }
    .contents_lr-item_top_tab2{
      width: 152px;
      height: 68px;
      //padding: 16px 16px 10px 16px;
      box-sizing: border-box;
      background-image: url("../../assets/img/datav/data_tab2.png");
      background-size: cover;
      background-position: center center;
    }
    .contents_lr-item_top_tab3{
      width: 152px;
      height: 68px;
      //padding: 16px 16px 10px 16px;
      box-sizing: border-box;
      background-image: url("../../assets/img/datav/data_tab3.png");
      background-size: cover;
      background-position: center center;
    }
  }
  //左右两侧 三个块
  .contetn_lr-item {
    height: 310px;
    margin-bottom: 65px;
  }

  .contetn_center_top {
    width: 100%;
  }

  // 中间
  .contetn_center {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin-top: 60px;
  }

  .contetn_center-bottom {
    height: 315px;
  }

  //左边 右边 结构一样
  .contetn_left,
  .contetn_right {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;


  }
}


@keyframes rotating {
    0% {
        -webkit-transform: rotate(0) scale(1);
        transform: rotate(0) scale(1);
    }
    50% {
        -webkit-transform: rotate(180deg) scale(1.1);
        transform: rotate(180deg) scale(1.1);
    }
    100% {
        -webkit-transform: rotate(360deg) scale(1);
        transform: rotate(360deg) scale(1);
    }
}
</style>
